<template>
    <image
        v-if="iconInfo.content"
        :src="iconInfo.content"
        :class="size ? `yq-h-${size} yq-w-${Math.round((size * iconInfo.width) / iconInfo.height)}` : `yq-h-${iconInfo.height} yq-w-${iconInfo.width}`"
    ></image>
</template>

<script setup>
/* --------------------- 引用 --------------------- */
import { computed } from 'vue'
import iconDictionary from './iconDictionary.js'

/* ----------------- props 和 emit ---------------- */
const props = defineProps({
    // 图标名称
    name: {
        type: String,
        required: true,
        default: '',
    },
    // 颜色
    color: {
        type: String,
        default: '#000',
    },
    // 尺寸（类型为数字时单位为 rpx）
    size: {
        type: [String, Number],
    },
    // 相对于 svg 图标的原始尺寸放大倍数
    scale: {
        type: [String, Number],
        default: 2,
    },
})

/* ---------------- 字符串转 Base64 ---------------- */
const keyCharts = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
const encodeUtf8 = str => {
    str = str.replace(/\r\n/g, '\n')
    let result = ''
    for (let n = 0; n < str.length; n++) {
        const c = str.charCodeAt(n)
        if (c < 128) {
            result += String.fromCharCode(c)
        } else if (c > 127 && c < 2048) {
            result += String.fromCharCode((c >> 6) | 192)
            result += String.fromCharCode((c & 63) | 128)
        } else {
            result += String.fromCharCode((c >> 12) | 224)
            result += String.fromCharCode(((c >> 6) & 63) | 128)
            result += String.fromCharCode((c & 63) | 128)
        }
    }
    return result
}
const strToBase64 = str => {
    if (!str) {
        return
    }
    let result = ''
    let chr1, chr2, chr3, enc1, enc2, enc3, enc4
    let i = 0
    str = encodeUtf8(str)
    while (i < str.length) {
        chr1 = str.charCodeAt(i++)
        chr2 = str.charCodeAt(i++)
        chr3 = str.charCodeAt(i++)
        enc1 = chr1 >> 2
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
        enc4 = chr3 & 63
        if (isNaN(chr2)) {
            enc3 = enc4 = 64
        } else if (isNaN(chr3)) {
            enc4 = 64
        }
        result += keyCharts.charAt(enc1) + keyCharts.charAt(enc2) + keyCharts.charAt(enc3) + keyCharts.charAt(enc4)
    }
    return result
}

/* ------------------- computed ------------------- */
const iconInfo = computed(() => {
    const svgName = (props.name.startsWith('yq-icon-') ? '' : 'yq-icon-') + props.name
    // 尝试在图标字典中寻找 svg 内容
    if (!iconDictionary.hasOwnProperty(svgName)) {
        return {
            content: '',
        }
    }
    return {
        width: iconDictionary[svgName].width * props.scale,
        height: iconDictionary[svgName].height * props.scale,
        content: 'data:image/svg+xml;base64,' + strToBase64(iconDictionary[svgName].content.replace('<svg ', `<svg fill="${props.color}" `)),
    }
})
</script>

<style lang="less" scoped></style>
